<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="/js/ly.import.js"></script>
</head>
<body>
<div id="app">
    <ly-frame ref="frame" @change-user="uc">
        <template #content="opt">
            <div class="flex" style="height: calc(100% - 100px); justify-content: center; margin-bottom: 100px">
                <ly-menu :data="menus" style="width: 50%" @select="select"></ly-menu>
            </div>
        </template>
    </ly-frame>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data : {
            menus : [{title:'跳转测试页', icon:'el-icon-location', href:"test.html"},
                     {title:'跳转外站', icon:'el-icon-location',
                         menus:[{title:'百度(blank)', icon:'el-icon-location', href:"https://baidu.com"},
                                {title:'淘宝(self)', icon:'el-icon-location', href:"https://taobao.com", target:"_self"}]},
                     {title:'自定义菜单', icon:'el-icon-location', href:"/demo/ly-menu.html"},
                     {title:'功能七', icon:'el-icon-location'}
            ]
        },
        methods:{
            select(menu){
                console.info(menu.title, menu.icon, menu.href)
            },
            uc(u){
                console.info(u);
            }
        }

    })
</script>
</body>
</html>